<template>
  <div  style="width: 100%;">
    <div class="title"><i class="el-icon-map-location"></i> 中国地图</div>
    <div id="map1" class="map"></div>
  </div>
</template>

<script>
  export default {
    name: 'mapRouter',
    data() {
      return {
        chinaJson: require('../../../assets/json/china.json'),
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('map1'));
        var airData = [{ name: '北京', value: 39.92 },{ name: '天津', value:39.13 },{ name: '上海', value: 31.22 },{ name: '重庆', value: 66 },
        	{name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南',value: 25.04 },{ name: '辽宁', value: 50 },
        	{ name: '黑龙江', value: 114},{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山东', value: 92 },
        	{ name: '新疆', value: 84 },{ name: '江苏', value: 67 },{ name: '浙江', value: 84 },{ name: '江西', value: 96 },
        	{ name: '湖北',value: 273 },{ name: '广西', value: 59 },{ name: '甘肃', value: 99 },{name: '山西', value: 39 },
        	{ name: '内蒙古', value: 58 },{ name: '陕西',value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },
        	{name: '贵州', value: 71 },{ name: '广东', value: 38 },{ name: '青海',value: 57 },{ name: '西藏', value: 24 },
        	{ name: '四川', value: 58 },{name: '宁夏', value: 52 },{ name: '海南', value: 54 },{ name: '台湾',value: 88 },
        	{ name: '香港', value: 66 },{ name: '澳门', value: 77 },{name: '南海诸岛', value: 55 }];
        var scatterData = [{
        	// value: [117.283042, 31.86119] ,// 散点的坐标, 使用的是经纬度
        	// value: [22.517882,113.439088] ,// 散点的坐标, 使用的是经纬度
        	value: [113.280637, 23.125178] ,// 散点的坐标, 使用的是经纬度
        }];
        this.$echarts.registerMap('chinaMap', this.chinaJson)
        // 2.指定配置
        var option = {
          geo: {
            type: 'map', // map是一个固定的值
            map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
            roam: true, //缩放
            label: {
              show: true
            },
            zoom: 0.9,
            center: [104.065735, 30.659462]
          },
          series: [{
            data: airData,
            geoIndex: 0,
            type: 'map'
          }, {
            data: scatterData,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 10
            }
          }],
          visualMap: {
            min: 0, // 最小值
            max: 300, // 最大值
            inRange: {
              color: ['white', 'red'] // 颜色的范围
            },
            bottom: '20px',
            calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          }
        };
        // 3. 把配置给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() { //自动适应大小
        	myChart.resize();
        });
      }
    }
  }
</script>

<style>
  .title {
    color: #0055ff;
    font-size: 24px;
    font-weight: 600;
    float: left;
  }
  .map {
    width: 1080px;
    height: 600px;
    margin-top: 100px;
    margin-left: 10%;
  }
</style>
